<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>样品订单详情</span>
      </div>
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="formRule"
        label-position="right"
        label-width="120px"
        style="width:100%;flex-wrap:wrap"
        class="flex"
      >
       <el-form-item label="订单时间" prop="createTime" style="width:30%">
          <el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="订单号" prop="recordNum" style="width:30%">
          <el-input v-model="orderForm.recordNum" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="订单状态" prop="oldstatus" style="width:30%">
          <el-input v-model="orderForm.oldstatus" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="来源类别" prop="from" style="width:30%">
          <el-input v-model="orderForm.from" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="用户名" prop="askAccount" style="width:30%">
          <el-input v-model="orderForm.askAccount" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="联系人电话" prop="askPhone" style="width:30%;">
          <el-input v-model="orderForm.askPhone" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="company" style="width:30%">
          <el-input v-model="orderForm.company" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" style="width:30%">
          <el-input v-model="orderForm.contact" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="consignee" style="width:30%">
          <el-input v-model="orderForm.consignee" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人联系电话" prop="consigneeMobile" style="width:30%">
          <el-input v-model="orderForm.consigneeMobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="companyAddress" style="width:30%">
          <el-input v-model="orderForm.companyAddress" placeholder="" :disabled="isDisabled" :title="orderForm.companyAddress"></el-input>
        </el-form-item>
        <el-form-item label="申请理由" prop="remark" style="width:30%">
          <el-input v-model="orderForm.remark" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="终端客户" prop="client" style="width:30%">
          <el-input v-model="orderForm.client" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="项目产品" prop="useProduct" style="width:30%">
          <el-input v-model="orderForm.useProduct" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
       
         <el-form-item label="量产时间" prop="createTime" style="width:30%">
          <el-input v-model="orderForm.createTime" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="单机用量" prop="useCount" style="width:30%">
          <el-input v-model="orderForm.useCount" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
          <el-form-item label="预估数量(套)" prop="useTotal" style="width:30%">
          <el-input v-model="orderForm.useTotal" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
       
         <el-form-item label="项目名称" prop="useProject" style="width:30%">
          <el-input v-model="orderForm.useProject" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="申请账户" prop="pm" style="width:30%">
          <el-input v-model="orderForm.pm" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        -->
         <el-form-item label="项目联系人姓名" prop="pm" style="width:30%;">
          <el-input v-model="orderForm.pm" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="项目联系人电话" prop="pmMobile" style="width:30%;">
          <el-input v-model="orderForm.pmMobile" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
 
         <el-form-item label="联系邮箱" prop="email" style="width:30%;">
          <el-input v-model="orderForm.email" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>

        <!--
        <el-form-item label="申请数量" prop="useCount" style="width:30%;">
          <el-input v-model="orderForm.useCount" placeholder="" :disabled="isDisabled"></el-input>
        </el-form-item>
        -->
      </el-form>

      <!--新增列表 可以操作区域-->
      <el-table :data="tableData" style="width: 100%" height="400" stripe>
        <el-table-column prop="productNum" label="样品物料料号" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="供应商" align="center"></el-table-column>
       	<el-table-column prop="count" label="申请数量" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="500" fixed="right">
          <template slot-scope="scope">
            <div>

 
              <el-button type="primary" size="mini" style="float:right;" @click="showExpress2(scope.row)" >
                <p style="color:white">查看物流</p>
              </el-button>

               <el-button type="primary" size="mini" style="float:right;margin-right:10px;margin-left:0px" v-if="scope.row.oldstatus == 1 && sendby == 2" @click="send(scope.row)" >
                <p style="color:white">发货</p>
              </el-button>

              <el-button type="primary" size="mini" style="float:right;margin-right:10px" @click="download(scope.row,scope.$index)" >
                <p style="color:white">预览</p>
              </el-button>

              <el-upload :action="uploadActionUrl"  style="float:right" :headers="{Authorization:token}" :on-success="handlePreview" >
                <el-button type="primary" size="mini"  @click="getid(scope.row,scope.$index)">上传产品资料</el-button>
              </el-upload>

               <el-button size="mini" type="primary" style="float:right;margin-right:10px" @click="addnum(scope.row,scope.$index)">
                <p style="color:white;">修改数量</p>
              </el-button>
         
              

            </div>
          </template>
        </el-table-column>
      </el-table>


      <el-pagination
        style="text-align:center;margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

 
    </el-card>
       <!--确认发货-->
        <el-dialog title="确认发货"
                 :visible.sync="sendVisible"
                 width="30%">
        <el-form ref="orderForm"
               :model="orderForm"
               :rules="formRule"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
            <el-form-item label="物流公司"
                        prop="expressCompany">
            <el-input v-model="orderForm.expressCompany"
                      placeholder="顺丰速运"></el-input>
          </el-form-item>
          <el-form-item label="物流号"
                        prop="expressNum">
            <el-input v-model="orderForm.expressNum"
                      placeholder="请输入有效的物流编号"></el-input>
          </el-form-item>
        </el-form> 
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="sendVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="sendProduct()">确 定</el-button>
        </span>
      </el-dialog>

              <!--物流详情-->
    <el-dialog
      style="width:800px;margin:0 auto;margin-top:50px"
      title="物流详情"
      :modal="true"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="expressInfo">
        <el-form-item label="发货商" prop="deliverySide" label-width="70px">
          <el-input
            :disabled="true"
            v-model="expressInfo.deliverySide"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="物流公司" label-width="70px">
          <el-input
            :disabled="true"
            v-model="expressInfo.expressCompany"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="物流单号"
          label-width="70px"
          @click.native="goshunfeng(expressInfo.expressNum)"
        >
          <el-input
            placeholder="请输入内容"
            :disabled="true"
            v-model="expressInfo.expressNum"
          >
            <template slot="append">查看物流</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  SAMPLE_RECORDLISTBYMAINID,recordListByMain,applyr,currentUser,modifyCount,modifyAmlFile,CONFIRMSEND
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import { Message } from 'element-ui'
export default {
  data() {
    return {
//    downloadUrl: 'http://oss.dataos.top/',
			downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      uploadActionUrl:'http://aml.foxcore.cn/api/v1/file/pdf/product',
      orderForm: {},
      formRule: {},
      tableData: [],
      isDisabled: false,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      token:'1123',
        rowData:{},
       sendVisible:false,
       dialogFormVisible: false,
       expressInfo: [],
       deliverySide:'',
       sendby:'',

    };
  },
  mounted() {
     this.token = sessionStorage.getItem('op-token')

    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
      this.expressInfo.deliverySide = this.orderForm.deliverySide
      this.sendby = this.orderForm.deliverySide
      console.log("详情：",this.orderForm)
      console.log("this.sendby", this.sendby)

  		this.orderForm.createTime = this.formatSecond(this.orderForm.createTime)
			if(this.orderForm.oldstatus == 0){
				this.orderForm.oldstatus = "已提交审核"
			}else if(this.orderForm.oldstatus == 1){
				this.orderForm.oldstatus = "已审核"
			}else if(this.orderForm.oldstatus == 2){
				this.orderForm.oldstatus = "已婉拒"
			}else if(this.orderForm.oldstatus == 3){
				this.orderForm.oldstatus = "待发货"
			}else if(this.orderForm.oldstatus == 4){
				this.orderForm.oldstatus = "待收货"
			}else if(this.orderForm.oldstatus == 5){
				this.orderForm.oldstatus = "待评价"
			}else {
				this.orderForm.oldstatus = "未知"
      }
      
      if(this.orderForm.from==0){
        //0aml 1 商城申请
        this.orderForm.from="AML"
      }else{
        this.orderForm.from="商城申请"
      }
       //获取列表数据
        recordListByMain({
                recordmainId:this.orderForm.id,
                pageNo:1,
                pageSize:10
            }).then(res => {
                this.tableData = res.data.dataList
                let datacount = this.tableData.length
                let i = 0;
                for (i = 0; i < datacount; i++) {

                    this.tableData[i].oldstatus = this.tableData[i].status
                    if(this.tableData[i].status == 0){
                        this.tableData[i].status ='已提交审核'
                    }
                    if(this.tableData[i].status == 1){
                        this.tableData[i].status ='待发货'
                    }
                    if(this.tableData[i].status == 2){
                        this.tableData[i].status ='已婉拒'
                    }
                    if(this.tableData[i].status == 4){
                        this.tableData[i].status ='已完成发货'
                    }
                }

                console.log(this.tableData)
            })
     // this.getOrderList()
    }
  },


  methods: {
        //物流详情
     showExpress2(row) {
       if(this.expressInfo.deliverySide == 1){
          row.deliverySide = "鸿芯优电上海仓";
       }else if(this.expressInfo.deliverySide == 2 ){
          row.deliverySide = "制造商直出";
       }else{
          row.deliverySide = "未知";
       }
     
      this.expressInfo = row;
      this.dialogFormVisible = true;
    },
    goshunfeng(url) {
      var hrefurl =
        "https://www.sf-express.com/cn/sc/dynamic_function/waybill/#search/bill-number/" +
        url;
      window.open(hrefurl);
    },
        //发货
    send(row){
       this.rowData=row
       console.log("rowData",row)
       this.sendVisible=true
    },
    sendProduct(){
  
      if(!this.orderForm.expressCompany){
        this.orderForm.expressCompany = '顺丰速运'
      }

      CONFIRMSEND({
        recordId:this.rowData.id,
        expressCompany:this.orderForm.expressCompany,
        expressNum:this.orderForm.expressNum,
      }).then(res=>{
        this.$message.success('发货成功')
        this.sendVisible=false
        this.rowData.oldstatus = 2
        
      })
    },
    //下载资料
      download(row, index){
          console.log(row)
          if(row.amlFile){
              var url = this.downloadUrl + row.amlFile;
              location.href = url;
          }else{
              Message({ message: '无下载资料', type: 'error', duration: 2000 })
          }

      },
    //上传产品资料
      getid(row, index){
          this.listid = row.id
      },
      handlePreview(res,row){
          let src= res.data
          modifyAmlFile({
              recordId:this.listid,
              amlFile: src
          }).then(res2 => {
            console.log(res2)
            Message({ message: '上传成功', type: 'success', duration: 2000 })
             
          })
      },
    //修改数量
    addnum(row, index) {
      this.$prompt('请输入修改数量', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

          if(value == null || value == 0){
             this.$message({
              type: 'error',
              message: '请输入合法数量'
              }); 
          }else{
        
            modifyCount({
                  recordId: row.id,
                  count: value
                }).then(res => {
                  console.log("数量修改成功")
                  row.count = value
                      
              })
          }
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },

      pass(){
          SAMPLE_RECORDLISTBYMAINID({
              recordmainId:this.orderForm.id,
              pageNo: this.currentPage,
              pageSize: this.pageSize
          }).then(res => {
              this.tableData = res.data.dataList
              this.total = res.data.count
          })
      },
 
    formatFrom (row, column) {
      var status = row[column.property]
      switch (status) {
        case 0: return 'AML'
        case 1: return '商城申请'
      }
    },
    //时间格式化  
    formatSecond(row, column) {
//    var second = row[column.property];  
//    if (!second) return ""; 
      return formatDate(new Date(row*1000),"yyyy-MM-dd hh:mm:ss");  
    },
    // 订单状态格式化
    formatStatus(row, column) {
      var status = row[column.property]
      switch(status) {
        case 0: return '审核中'
        case 1: return '已审核'
        case 2: return '已婉拒'
        case 3: return '待发货'
        case 4: return '待收货'
        case 5: return '待评价'
        default: return '未知'
      }
    },
    getOrderList(){
      SAMPLE_RECORDLISTBYMAINID({ 
	      recordmainId:this.orderForm.id,
	      pageNo: this.currentPage,
	      pageSize: this.pageSize
      }).then(res => {
	      this.tableData = res.data.dataList
	      this.total = res.data.count
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getOrderList()
    }
  }
};
</script>

<style lang="scss">
  .back {
    background: rgb(7, 131, 241);
    color: #fff;
    width: 30%;
    margin: 25px 0;
  }
  .el-upload-list--text{
    width: 100px;
  }
  .el-input-group__append {
  cursor: pointer;
  }
</style>